<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标事件</title>
</head>
<body>
<!--onclick	当单击鼠标时运行脚本。-->
<!--ondblclick	当双击鼠标时运行脚本。-->
<!--onmousedown	当按下鼠标按钮时运行脚本。-->
<!--onmouseup	当松开鼠标按钮时运行脚本。-->
<!--onmousemove	当鼠标指针移动时运行脚本。-->
<!--onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。-->
<!--onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡。-->
<!--onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。-->
<!--onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡。-->
<!--onmousewheel	当转动鼠标滚轮时运行脚本。-->
<!--onscroll	当滚动元素的滚动条时运行脚本。-->
<div id="box" style="width: 100px;height: 100px;background: black;"></div>
<p id="info">鼠标事件信息会显示在这里</p>
<script>
    const box = document.getElementById("box");
    const info = document.getElementById("info");

    /* 当鼠标移入div，背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
        info.textContent = "鼠标进入";
    };

    /* 当鼠标移出div，背景颜色变为绿色 */
    box.onmouseleave = function () {
        this.style.background = "green";
        info.textContent = "鼠标离开";
    };

    /* 点击时改变颜色 */
    box.onclick = function () {
        this.style.background = "blue";
        info.textContent = "鼠标点击";
    };

    /* 双击时改变颜色 */
    box.ondblclick = function () {
        this.style.background = "yellow";
        info.textContent = "鼠标双击";
    };

    /* 按下鼠标时显示信息 */
    box.onmousedown = function () {
        info.textContent = "鼠标按下";
    };

    /* 松开鼠标时显示信息 */
    box.onmouseup = function () {
        info.textContent = "鼠标松开";
    };

    /* 鼠标移动时显示位置 */
    box.onmousemove = function (event) {
        info.textContent = `鼠标移动: x=${event.clientX}, y=${event.clientY}`;
    };
</script>
</body>
</html>